{{template "head.html" .}}
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">账目列表 
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">添加</button>
            </h1>
        </div>
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <!-- <div class="panel-heading"> -->
                   
                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">添加账目<input id="switchbtn" type="checkbox"/></h4>
                                </div>
                                <div class="modal-body">
                                    <form id="addform" role="form" class="form-horizontal" action="/bill" method="post">
                                        <input type="hidden" name="bookId" value="{{.bookId}}">
                                        <input name="title" type="hidden" value="买菜">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">金额</label>
                                            <div class="col-sm-10">
                                                <input name="account" class="form-control" value="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">消费日期</label>
                                            <div class="col-sm-10 date" id="datetimepicker">
                                                <input name="occurdate" class="form-control" value="">
                                                <span class="add-on"><i class="icon-th"></i></span>
                                            </div>
                                            <!-- <div class="col-sm-10 date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                                                <input class="form-control" size="16" type="text" value="12-02-2012">
                                                <span class="add-on"><i class="icon-th"></i></span>
                                            </div>  -->
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">付款人</label>
                                            <div class="col-sm-10">
                                                <select name="casherId" class="form-control">
                                                    {{range .users}}
                                                    <option value="{{.ID}}">{{.NickName}}</option>
                                                    {{end}}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">消费人数</label>
                                            <div class="col-sm-10">
                                                <input name="total" class="form-control" value="{{len .users}}">
                                            </div>
                                            <input name="users" type="hidden">
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">消费人员</label>
                                            <div class="col-sm-10">
                                                {{range .users}}
                                                <label>
                                                    <input name="customer" type="checkbox" value="{{.ID}}" checked="true">{{.NickName}}
                                                </label>
                                                {{end}}
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">消费明细</label>
                                            <div class="col-sm-10">
                                                <textarea name="detail" class="form-control" rows="3"></textarea>
                                            </div>
                                        </div>
                                        <div id = "extrainfo" style="display:none;">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">邀请人</label>
                                            <div class="col-sm-10">
                                                <select name="invitorId" class="form-control">
                                                    <option value="">--请选择--</option>
                                                    {{range .users}}
                                                    <option value="{{.ID}}">{{.NickName}}</option>
                                                    {{end}}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">备注</label>
                                            <div class="col-sm-10">
                                                <input name="remark" class="form-control" value="">
                                            </div>
                                        </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" onclick="submitbill()">提交</button>
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                <!-- </div> -->
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
                        <thead>
                            <tr>
                                <!-- <th><input type="checkbox" class="checkall" /></th>
                                <th>编号</th> -->
                                <th>收支类型</th>
                                <th>金额</th>
                                <th>付款人</th>
                                <th>消费人数</th>
                                <th>明细</th>
                                <th>时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- <tr class="odd gradeX">
                                    <td>Trident</td>
                                    <td>Internet Explorer 4.0</td>
                                    <td>Win 95+</td>
                                    <td class="center">4</td>
                                    <td class="center">X</td>
                                </tr>
                                <tr class="even gradeC">
                                    <td>Trident</td>
                                    <td>Internet Explorer 5.0</td>
                                    <td>Win 95+</td>
                                    <td class="center">5</td>
                                    <td class="center">C</td>
                                </tr> -->
                            {{range $key,$value := .data}}
                            <tr class="even gradeC">
                                <!-- <td><input type="checkbox"/></td>
                                <td>{{.ID}}</td> -->
                                {{if eq .Cate "-"}}
                                <td>支出</td>
                                {{else}}
                                <td>收入</td>
                                {{end}}
                                <td>{{.Account}}</td>
                                <td>{{.NickName}}</td>
                                <td>{{.Total}}</td>
                                <td class="center">{{.Detail}}</td>
                                <td class="center">{{.OccureDate}}</td>
                                <td><a href="#" onclick="deletebill('{{.ID}}')">删除</a></td>
                            </tr>
                            {{end}}
                        </tbody>
                    </table>
                    <!-- /.table-responsive -->
                    <!-- <div class="well">
                        <h4>DataTables Usage Information</h4>
                        <p>DataTables is a very flexible, advanced tables plugin for jQuery. In SB Admin, we are using a specialized version of DataTables built for Bootstrap 3. We have also customized the table headings to use Font Awesome icons in place of images. For complete documentation on DataTables, visit their website at <a target="_blank" href="https://datatables.net/">https://datatables.net/</a>.</p>
                        <a class="btn btn-default btn-lg btn-block" target="_blank" href="https://datatables.net/">View DataTables Documentation</a>
                    </div> -->
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
</div>
<!-- /#page-wrapper -->
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
    return currentdate;
}

function deletebill(id){
    $.get("/bill/delete?id="+id,function(result){
        window.location.reload();
    })
}

$(document).ready(function() {
    $('#switchbtn').bootstrapSwitch({
        onText:'有客',
        offText:'正常',
        onSwitchChange:function(value,args){
            if(args){
                $('#extrainfo').show();
            }else{
                $('#extrainfo').hide();
            }
        }
    });
    $('#dataTables-example').DataTable({
        responsive: true,
        "order": [[ 5, "desc" ]],
        "createdRow": function ( row, data, index ) {
            $('td', row).eq(5).html(data[5].split(" ")[0]);
            $('td', row).eq(4).html(data[4].split("\\n").join(" "));
        },
    });
    $('#dataTables-example tbody').on( 'click', 'tr', function () {
        //$(this).toggleClass('selected');
        var ck = $(this).find("td:first input:checkbox");
        $(ck).prop("checked", !$(ck).is(":checked"));
    } );
    $('input[name="occurdate"]').val(getNowFormatDate());
    $('#datetimepicker').datetimepicker({
        minView: "month", //选择日期后，不会再跳转去选择时分秒 
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: true,
    });
    $('#addform').bootstrapValidator({
        //        live: 'disabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            account: {
                validators: {
                    notEmpty: {
                        message: "金额不能为空"
                    },
                    regexp: {
                        regexp: /^\d+(\.\d+)?$/,
                        message: '请输入正确的金额'
                    }
                }
            },
            occurdate: {
                validators: {
                    notEmpty: {
                        message: "消费日期不能为空"
                    },
                    date: {
                        format: 'YYYY-MM-DD',
                        message: '消费日期格式不正确，正确格式为2017-06-02'
                    }
                }
            },

        }

    }).on('success.form.bv', function(e) {//点击提交之后
         // Prevent form submission
         e.preventDefault();

         // Get the form instance
         var $form = $(e.target);

         // Get the BootstrapValidator instance
         var bv = $form.data('bootstrapValidator');

         // Use Ajax to submit form data 提交至form标签中的action，result自定义
         $.post($form.attr('action'), $form.serialize(), function(result) {
           if(result.succeed){
                window.location.reload();
           }else{
                alert(result.message);
           }
        });
     });
});

function submitbill() {
    var users = new Array()
    $('input[name="customer"]:checked').each(function() {
        users.push($(this).val());
    });
    $('input[name="users"]').val(users.join(","));

    var bootstrapValidator = $("#addform").data('bootstrapValidator');
    bootstrapValidator.validate();
    if (bootstrapValidator.isValid()){
        //$("#addform").submit();
    }else {
        return;
    }
}
</script>
{{template "footer.html"}}
